<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="style/1.css" />
    <link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" />
    <title>9.29作业</title>
  </head>
  <body>
    <div class="header">
      <div class="header-seaction">
        <div class="header-logo">
          <a href="#"><i class="fa fa-code" aria-hidden="true"></i> houdunren.com</a>
        </div>
        <div class="nav">
          <ul>
            <li><a href="#">系统学习</a></li>
            <li><a href="#">实战课程</a></li>
            <li><a href="#">最近更新</a></li>
            <li><a href="#">话题讨论</a></li>
            <li><a href="#">签到打卡</a></li>
            <li><a href="#">订阅会员</a></li>
            <li><a href="#">在线文档</a></li>
            <li><a href="#">训练营</a></li>
            <li><a href="#">直播间</a></li>
          </ul>
        </div>
        <div class="message">
          <a href="#">
            <i class="fa fa-envelope-o" aria-hidden="true"></i>
            <span>99</span>
          </a>
        </div>
        <div class="person">
          <label for="ck1">
            <img src="images/timg.jpeg" />
            <span>ximeidada</span>
            <i class="fa fa-caret-down" aria-hidden="true"></i>
          </label>
          <input type="checkbox" id="ck1" />
          <div class="person-menu">
            <a href="#">修改资料</a>
            <a href="#">头像设置</a>
            <a href="#">修改密码</a>
            <a href="#">我的帖子</a>
            <a href="#">会员周期</a>
            <a href="#">站内消息</a>
            <a href="#">我的主页</a>
            <a href="#">退出登录</a>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <article class="wd-1100 bd-1 br-1">
        <div class="article-header">
          <h1>系统学习</h1>
          <p>通过系统课程全面掌握一门语言或软件的使用，尤其适合刚入门的新手系统牢固的掌握知识。</p>
        </div>
        <div class="article-body">
          <div class="article-body-seation">
            <div class="pic">
              <img src="images/javascript.png" />
            </div>
            <div class="seation-title">
              <p>JAVASCRIPT编程语言</p>
            </div>
          </div>
          <div class="article-body-seation">
            <div class="pic">
              <img src="images/css.png" />
            </div>
            <div class="seation-title">
              <p>CSS3样式表</p>
            </div>
          </div>
          <div class="article-body-seation">
            <div class="pic">
              <img src="images/html.png" />
            </div>
            <div class="seation-title">
              <p>HTML标记语言</p>
            </div>
          </div>
          <div class="article-body-seation">
            <div class="pic">
              <img src="images/mysql.png" />
            </div>
            <div class="seation-title">
              <p>Mysql数据库</p>
            </div>
          </div>
          <div class="article-body-seation">
            <div class="pic">
              <img src="images/vue.png" />
            </div>
            <div class="seation-title">
              <p>开发环境</p>
            </div>
          </div>
          <div class="article-body-seation">
            <div class="pic">
              <img src="images/vscode.png" />
            </div>
            <div class="seation-title">
              <p>编码软件</p>
            </div>
          </div>
          <div class="article-body-seation">
            <div class="pic">
              <img src="images/php.png" />
            </div>
            <div class="seation-title">
              <p>PHP7编程</p>
            </div>
          </div>
        </div>
      </article>
    </div>
    <div class="footer">
      <div class="text-body">
        <div class="slogan">我们的使命：传播互联网前沿技术，帮助更多的人实现梦想</div>
        <div class="copyright">Copyright © 2010-2020 houdunren.com All Rights Reserved 京ICP备12048441号-3</div>
        <div class="phone-email">
          <span class="phone"><i class="fa fa-phone-square" aria-hidden="true"></i> 18611400072</span>&nbsp;&nbsp;&nbsp;
          <span class="email"><i class="fa fa-envelope" aria-hidden="true"></i> 2300071698@qq.com</span>
        </div>
        <div class="auther">编码: 向军大叔 / 晚八点直播</div>
      </div>
    </div>
  </body>
</html>
